<div class="particle-bg" fParticle
     [color]="['rgba(0,0,0,.05)']" [fillColor]="'rgba(0,0,0,.03)'" [size]="[15, 22]" [distance]="200"></div>
<div class="panel" #panel>
 <div class="panel-body">
   <div class="free-panel-front">
     <p class="logo">FreeNG</p>
     <p class="subtitle">{{'DEMO.LOGIN.WELCOME' | translate}}</p>
     <form [formGroup]="loginForm" (ngSubmit)="onLogin()">
       <div class="form-group">
         <label for="account" class="sr-only">{{'DEMO.LOGIN.ACCOUNT' | translate}}</label>
         <input type="text" id="account" placeholder="{{'DEMO.LOGIN.ACCOUNT' | translate}}" formControlName="account">
       </div>
       <div class="form-group">
         <label for="pwd" class="sr-only">{{'DEMO.LOGIN.PASSWORD' | translate}}</label>
         <input type="password" id="pwd" placeholder="{{'DEMO.LOGIN.PASSWORD' | translate}}" formControlName="password">
       </div>
       <div class="form-group">
         <button type="submit" fButton theme="primary" block>{{'DEMO.LOGIN.LOGIN' | translate}}</button>
       </div>
     </form>
     <div class="form-group panel-footer">
       <a (click)="onToggle()">{{'DEMO.LOGIN.REGISTER' | translate}}</a>
     </div>
   </div>
   <div class="free-panel-back">
     <p class="logo">FreeNG</p>
     <p class="subtitle">{{'DEMO.LOGIN.WELCOME' | translate}}</p>
     <form [formGroup]="registerForm" (ngSubmit)="onRegister()">
       <div class="form-group">
         <label for="account" class="sr-only">{{'DEMO.LOGIN.NAME' | translate}}</label>
         <input type="text" id="username" placeholder="{{'DEMO.LOGIN.NAME' | translate}}" formControlName="username">
       </div>
       <div class="form-group">
         <label for="account" class="sr-only">{{'DEMO.LOGIN.EMAIL' | translate}}</label>
         <input type="text" id="email" placeholder="{{'DEMO.LOGIN.EMAIL' | translate}}" formControlName="email">
       </div>
       <div class="form-group">
         <label for="pwd1" class="sr-only">{{'DEMO.LOGIN.PASSWORD' | translate}}</label>
         <input type="password" id="pwd1" placeholder="{{'DEMO.LOGIN.PASSWORD' | translate}}" formControlName="password1">
       </div>
       <div class="form-group">
         <label for="pwd1" class="sr-only">{{'DEMO.LOGIN.CONFIRM' | translate}}</label>
         <input type="password" id="pwd2" placeholder="{{'DEMO.LOGIN.CONFIRM' | translate}}" formControlName="password2">
       </div>
       <div class="form-group">
         <button type="submit" fButton theme="primary" block>{{'DEMO.LOGIN.REGISTER' | translate}}</button>
       </div>
     </form>
     <div class="form-group panel-footer">
       <a (click)="onToggle()">{{'DEMO.LOGIN.LOGIN' | translate}}</a>
     </div>
   </div>
 </div>
</div>
